<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of Stacked Blocks</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="300" style="border:1px solid #000;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow
    function drawArrow(ctx, fromX, fromY, toX, toY, headLength) {
        const angle = Math.atan2(toY - fromY, toX - fromX);
        
        // Draw the line
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke();

        // Draw the arrowhead
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fill();
    }
    
    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;

    // --- Draw Ground ---
    const groundY = 250;
    ctx.beginPath();
    ctx.moveTo(0, groundY);
    ctx.lineTo(canvas.width, groundY);
    ctx.stroke();
    
    // Draw hatching for the ground
    for (let i = 0; i < canvas.width; i += 15) {
        ctx.beginPath();
        ctx.moveTo(i, groundY);
        ctx.lineTo(i - 10, groundY + 10);
        ctx.stroke();
    }

    // --- Define Block Properties ---
    const centerX = canvas.width / 2;
    const blockC = { width: 240, height: 70 };
    const blockB = { width: 160, height: 50 };
    const blockA = { width: 100, height: 50 };

    const cY = groundY - blockC.height;
    const bY = cY - blockB.height;
    const aY = bY - blockA.height;

    const cX = centerX - blockC.width / 2;
    const bX = centerX - blockB.width / 2;
    const aX = centerX - blockA.width / 2;

    // --- Draw Blocks ---
    ctx.strokeRect(cX, cY, blockC.width, blockC.height);
    ctx.strokeRect(bX, bY, blockB.width, blockB.height);
    ctx.strokeRect(aX, aY, blockA.width, blockA.height);

    // --- Add Labels to Blocks ---
    ctx.font = 'italic 22px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('a', centerX, aY + blockA.height / 2);
    ctx.fillText('b', centerX, bY + blockB.height / 2);
    ctx.fillText('c', centerX, cY + blockC.height / 2);

    // --- Draw Forces ---
    const forceLength = 100;
    const arrowHeadLength = 10;
    
    // Force Fb on block b
    const fbY = bY + blockB.height / 2;
    const fbStartX = bX;
    const fbEndX = fbStartX - forceLength;
    drawArrow(ctx, fbStartX, fbY, fbEndX, fbY, arrowHeadLength);

    // Force Fc on block c
    const fcY = cY + blockC.height / 2;
    const fcStartX = cX + blockC.width;
    const fcEndX = fcStartX + forceLength;
    drawArrow(ctx, fcStartX, fcY, fcEndX, fcY, arrowHeadLength);
    
    // --- Add Labels to Forces ---
    // Label for Fb
    ctx.font = 'italic 24px Times New Roman';
    ctx.textAlign = 'right';
    const fbLabelX = fbStartX - 15;
    const fbLabelY = fbY;
    ctx.fillText('F', fbLabelX, fbLabelY);
    ctx.font = 'italic 16px Times New Roman';
    ctx.textAlign = 'left';
    ctx.fillText('b', fbLabelX, fbLabelY + 6);
    
    // Label for Fc
    ctx.font = 'italic 24px Times New Roman';
    ctx.textAlign = 'right'; // Position F relative to the start point
    const fcLabelX = fcStartX + 15;
    const fcLabelY = fcY;
    ctx.fillText('F', fcLabelX, fcLabelY);
    ctx.font = 'italic 16px Times New Roman';
    ctx.textAlign = 'left';
    ctx.fillText('c', fcLabelX, fcLabelY + 6);

</script>

</body>
</html>